<template>
	<view class="">
		<scroll-view class="page" id="replay" :scroll-y="isScroll" :scroll-into-view="scrollView" :scroll-top="scrollTop" scroll-with-animation @scrolltolower="scrolltolower">
			<view class="" id="box">
				<slot></slot>
			</view>
			<comment-main :router="router" 
			:id="id" 
			:data="data" 
			@preventScroll="preventScroll" 
			@allowScroll="allowScroll" 
			@hasResult="hasResult" 
			@scrollToComment="scrollToComment" 
			@hideBottom="hideBottom = false"
			@showBottom="hideBottom = true"/>
		</scroll-view>
		<comment-bottom v-show="hideBottom" :router="router" :id="id" :data="data" @preventScroll="preventScroll" @allowScroll="allowScroll"/>
	</view>
</template>

<script>
	import _custom from '@/common/_custom.js'
	import _data from '@/common/_data.js'
	import CommentMain from '@/pages/home/child/week-report-view/components/comment-main.vue'
	import CommentBottom from '@/pages/home/child/week-report-view/components/comment-bottom.vue'
	
	export default {
		components: {
			CommentMain,CommentBottom
		},
		data() {
			return {
				obsusername: _data.localData('name'),
				pxid: _data.localData('userid'),
				isScroll: true,
				scrollTop: '',
				scrollView: '',
				hideBottom: true
			}
		},
		props: {
			id: {
				type: String,
				default: ''
			},
			pageReady: {
				type: Boolean,
				default: false
			},
			data: {
				type: Object,
				default: () => {}
			},
			router: {
				type: String,
				required: true,
				default: ''
			},
		},
		methods: {
			/**
			 * 阻止滚动
			 */
			preventScroll() {
				this.isScroll = false;
			},
			/**
			 * 允许滚动
			 */
			allowScroll() {
				this.isScroll = true;
			},
			/**
			 * 数据渲染后滚动到指定位置
			 * @param {Object} v
			 */
			hasResult(v) {
				let that = this;
				let timer = setInterval(() => {
					if(this.pageReady) {
						this.scrollView = v;
						clearInterval(timer)
					}
				},100)
			},
			/**
			 * 滚动到评论头部
			 * @param {Object} v
			 */
			scrollToComment(v) {
				this.scrollView = '';
				this.$nextTick(() => {
					this.scrollView = v;
				})
			},
			/**
			 * 滚动到底部
			 */
			scrolltolower() {
				uni.$emit('scrolltolower')
			}
		}
	}
</script>

<style scoped lang="scss">
	.page {
		height: 100vh;
		background-color: #fff;
		overflow: hidden;
	}
</style>
